import { BannerContainer, BannerItem } from './style'
import { bannerPcList, getRecommendPlayList } from '@/services/home'
import { Navigation, Pagination } from 'swiper'
import PlayListCard from '@/components/PlayListCard'
import 'swiper/css'
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import { useEffect, useState } from 'react'

export default function Recommended() {
	const [banners, setBanners] = useState([])
	const [recommendPlayList, setRecommendPlayList] = useState([])
	const handleFetchBannerList = () => {
		bannerPcList().then((res) => {
			if (res.code === 200) {
				setBanners(res.banners)
			}
		})
	}
	const handleFetchPlayList = () => {
		getRecommendPlayList({ limit: 28 }).then((res) => {
			if (res.code === 200) {
				setRecommendPlayList(res.result)
			}
		})
	}
	useEffect(() => {
		handleFetchBannerList()
		handleFetchPlayList()
	}, [])
	return (
		<>
			<BannerContainer>
				<Swiper
					autoplay={true}
					slidesPerView={1}
					spaceBetween={0}
					loop={true}
					pagination={{
						clickable: true,
					}}
					navigation={true}
					modules={[Pagination, Navigation]}
					className="mySwiper"
				>
					{banners.map((item) => {
						return (
							<SwiperSlide key={item.imageUrl}>
								<BannerItem className={'banner-item'} backgroundUrl={item.imageUrl}>
									<img className="cover" src={item.imageUrl} alt="图片加载失败！" />
									<p className="typeTitle">{item.typeTitle}</p>
								</BannerItem>
							</SwiperSlide>
						)
					})}
				</Swiper>
			</BannerContainer>
			<div>
				<PlayListCard title="热门推荐/Hot" list={recommendPlayList} />
			</div>
		</>
	)
}
